Ajax live search table generation using codeigniter

---

Today I will show how to make an ajax driven live search table using jquery and PHP. The table will generate in real time when the user types some value in the search box. We implement this in CodeIgniter by using 2 view pages,  one view contains the search box and other view will create the ajax driven search box. 

The jquery code is given below

<script>
$(document).ready(function(){
   $("#search").keyup(function(){
       var str=  $("#search").val();
       if(str == "") {
               $( "#txtHint" ).html("<b>Book information will be listed here...</b>"); 
       }else {
               $.get( "<?php echo base_url();?>home/ajaxsearch?id="+str, function( data ){
                   $( "#txtHint" ).html( data );  
            });
       }
   });  
});  
</script>

The ajax is triggered by typing in search box by using keyup function in jquery. $.get function will fetch data from ajaxsearch function in home controller and it will be appended to div container with id texthint.

The complete code for input view is given below

<div class="container">
    
 <!-- search box container starts  -->
 
    <div class="search">
        <div class="space"></div>
  <form action="" method="get">
    
      <div class="row">
       <div class="col-lg-10 col-lg-offset-1">
        <div class="input-group">
            
            <span class="input-group-addon" >BOOK SEARCH</span>
  <input autocomplete="off" id="search"  type="text" class="form-control input-lg" placeholder="Search Book name or Author " >
   
        </div>
       </div>
      </div>   
      <div class="space"></div>
  </form>
     </div>  
  <!-- search box container ends  -->
  
    
     <div id="txtHint" style="padding-top:50px; text-align:center;" ><b>Book information will be listed here...</b></div>
     
</div>
<script>
// above script codes... 
</script>

Now the code for output view

<?php
	if(!empty($booktable ))  
 { 
    
      $output = '';
      $outputdata = '';  
      $outputtail ='';

      $output .= '<div class="container">
                   <div class="table-responsive">
                   <table class="table table-bordered">
	                <thead>
                          <tr>
			      <th>Book No</th>
                              <th>Book Name</th>
                              <th>Author</th>
                              <th>Price</th>
 		          </tr>
				   
                   </thead>
                   <tbody>
                   ';
                  
      foreach ($booktable as $objects)    
	   {   
           $outputdata .= ' 
                
                    <tr> 
		            <td >'.$objects->BOOKID.'</td>
		            <td >'.$objects->TITLE.'</td>
		            <td>'.$objects->AUTHOR.'</td>
                            <td>'.$objects->PRICE.'</td>
                    </tr> 
                
           ';
        //  echo $outputdata; 
                
          }  

         $outputtail .= ' 
                         </tbody>
                         </table>
                         </div>
                         </div> ';
         
         echo $output; 
         echo $outputdata; 
         echo $outputtail; 
 }  
 
 else  
 {  
      echo 'Data Not Found';  
 } 

The home controller code is given below

 public function ajaxsearch()
    {
      
       if(is_null($this->input->get('id')))
        {

        $this->load->view('input');    
		
        
        }
        else
        {
        $this->load->model('Bookmodel'); 
        
        $data['booktable']=$this->Bookmodel->booktable($this->input->get('id')); 
        
        $this->load->view('output',$data);
        
        }
        
       
    }

The code for booktable function in Bookmodel is given below

function booktable($search){

        $query = $this
                ->db
                ->select('*')
                ->from('book')
                ->like('TITLE',$search)
                ->or_like('AUTHOR',$search)
                ->get();
     
        if($query->num_rows()>0)
        {
            return $query->result(); 
        }
        else
        {
            return null;
        }
		
}

The sample output image of above result is given below